<template>
  <div id="detail-header">
    <!-- <div class="bg">
      <img :src="this.playlist.coverImgUrl || ''" alt="">
    </div> -->
    <div class="cover-img">
      <img :src="this.playlist.coverImgUrl" alt="" @load="imgLoad">
    </div>
    <!-- <div>{{ playlist }}</div> -->
    <div class="text-content">
      <!-- 第一排 -->
      <div class="first-line">
        <span class="red-tag left">歌单</span>
        <div class="title">{{ playlist.name }}</div>
        <div class="count">
          <div class="play-count">
            播放数
            <p>{{ playlist.playCount | playCount }}</p>
          </div>
          <div class="song-count">
            歌曲数
            <p>{{ playlist.trackCount }}</p>
          </div>
        </div>
      </div>
      <!-- 第二排 -->
      <div class="second-line">
        <div class="creator">
          <img :src="playlist.creator && playlist.creator.avatarUrl" alt="" class="avator">
          <span>{{ playlist.creator && playlist.creator.nickname }}</span>
          <span>{{ playlist.createTime | dateFormat}}创建</span>
        </div>
      </div>
      <!-- 第三排 -->
      <div class="third-line">
        <div class="playAll">
          <div>
            <i class="iconfont icon-bofang"></i>
            播放全部
          </div>
          <div class="add">+</div>
        </div>
        <div class="collect">
          <i class="iconfont icon-wodeshoucang"></i>
          收藏({{ playlist.subscribedCount }})
        </div>
        <div class="share">
          <i class="iconfont icon-fenxiang"></i>
          分享({{ playlist.shareCount }})
        </div>
      </div>
      <!-- 第四排 -->
      <div class="fourth-line">
        <div
          class="tag"
          v-if="playlist.tags && playlist.tags.length">
          <span>标签:</span>
          <span
            v-for="(item, index) in playlist.tags"
            :key="index">{{ item }}</span>
        </div>
        <div
          :class="{ description: true, omit: isOmit }"
          v-if="playlist.description">
          <span>简介:</span>
          <span v-html="$switchEnter(playlist.description || '')"></span>
          <div
            :class="{ 'omit-arrow': true, 'fall-down': !isOmit }"
            @click="changeOmit">
            <i class="el-icon-arrow-down"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      isOmit: true
    }
  },
  filters: {
    playCount (playCount) {
      return Math.floor(playCount / 10000) + '万'
    }
  },
  props: {
    playlist: { type: Object, default () { return {} } },
    privileges: { type: Array, default () { return [] } }
  },
  methods: {
    // 1. 控制简介是否收缩
    changeOmit () {
      this.isOmit = !this.isOmit
    },
    // 图片加载完成
    imgLoad () {
      this.$emit('imgLoad')
    }
  }
}
</script>

<style scoped lang="less">
#detail-header {
  padding: 40px 40px 0 40px;
  display: flex;
  min-height: 350px;
  width: 100%;
  // background-color: #fff;
  // .bg {
  //   width: calc(100% - 80px);
  //   position: absolute;
  //   filter: blur(15px);
  //   background-color: #fff;
  //   z-index: 0;
  //   img {
  //     width: 100%;
  //   }
  // }
  .cover-img {
    // flex-basis: 220px;
    width: 220px;
    height: 100%;
    vertical-align: text-bottom;
    background-color: #fafafa;
    > img {
      user-select: none;
      // float: left;
      // border: 1px solid #e3e5e3;
      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
      // width: 220px;
      height: 220px;
      border-radius: 5px;
    }
  }
  .text-content {
    // min-width: 640px;
    width: 100%;
    // flex: 1;
    // float: left;
    // display: inline-block;
    // overflow: hidden;
    margin-left: 40px;
    // width: 70%;
    // right: 40px;
    // top: 40px;
    // left: 300px;
    // 第一排
    > div {
      width: 100%;
    }
    .first-line {
      width: 100%;
      overflow: hidden;
      > div {
        float: left;
      }
      .red-tag {
        // width: 10%;
        user-select: none;
        position: relative;
        top: 8px;
        display: flex;
        align-items: center;
        font-size: 12px;
        padding: 1px 6px;
        color: #e03f40;
        border: 1px solid #e03f40;
        border-radius: 2px;
      }
      .title {
        width: 60%;
        margin-left: 5px;
        overflow: hidden;
        font-size: 24px;
      }
      .count {
        // cursor: default;
        user-select: none;
        height: 40px;
        color: #999;
        width: 25%;
        // display: flex;
        text-align: right;
        font-size: 12px;
        // flex-direction: column;
        float: right;
        > div {
          float: right;
          padding: 0 10px;
          &:nth-of-type(2) {
            border-right: 1px solid #e1e1e2;
          }
        }
        p {
          font-weight: 700;
          margin-top: 5px;
        }
      }
    }
    // 第二排
    .second-line {
      overflow: hidden;
      user-select: none;
      .creator {
        margin: 10px 0;
        .avator {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          vertical-align: middle;
        }
        span:nth-of-type(1) {
          font-size: 16px;
          color: #444;
          margin: 0 15px;
        }
        span:nth-of-type(2) {
          font-size: 12px;
          color: #888;
        }
      }
    }
    // 第三排
    .third-line {
      margin: 10px 0;
      display: flex;
      user-select: none;
      font-size: 13px;
      > div {
        height: 100%;
        line-height: 100%;
        padding: 6px 8px;
        border: 1px solid #e1e1e2;
        border-radius: 5px;
        background: #fff;
        margin-right: 20px;
        cursor: pointer;
        &:hover {
          background-color: #f5f5f7;
        }
      }
      .playAll {
        // background-color: #c62f2f;
        color: #fff;
        position: relative;
        padding: 0;
        padding-right: 30px;
        border: none;
        > div:nth-of-type(1) {
          border-radius: 5px 0 0 5px;
          padding: 6px 8px;
          height: 100%;
          background-color: #c62f2f;
          &:hover {
            background-color: #b12323;
          }
        }
        .add {
          font-size: 20px;
          display: flex;
          justify-content: center;
          line-height: 24px;
          background-color: #c62f2f;
          position: absolute;
          // height: 100%;
          right: 0;
          top: 0;
          bottom: 0;
          width: 30px;
          border-radius: 0 5px 5px 0;
          border-left: 1px solid #ca4343;
          &:hover {
            background-color: #b12323;
          }
          // width: 100px;
        }
      }
    }
    // 第四排
    .fourth-line {
      width: 100%;
      font-size: 13px;
      margin-top: 25px;
      > div {
        margin: 10px 0;
      }
      .tag {
        span {
          position: relative;
          margin-right: 15px;
          &:nth-of-type(n+2) {
            cursor: pointer;
            color: #0c73c2;
            &::after {
              position: absolute;
              content: "/";
              right: -12px;
              user-select: none;
            }
          }
          &:nth-last-of-type(1)::after {
            content: "";
          }
        }
      }
      .description {
        position: relative;
        width: 100%;
        padding-right: 30px;
        word-wrap: break-word;
        &.omit {
          overflow: hidden;
          display: -webkit-box; //将对象作为弹性伸缩盒子模型显示;
          -webkit-line-clamp: 2; //设置文本显示两行
          -webkit-box-orient: vertical;  //从上到下排列子元素;
          // text-overflow: ellipsis;//溢出部分用省略号代替
        }
        // white-space: normal;
        span {
          &:nth-of-type(1) {
            margin-right: 15px;
          }
        }
        .omit-arrow {
          position: absolute;
          right: 0px;
          top: 0;
          transition: all 300ms;
          cursor: pointer;
          font-size: 20px;
          &.fall-down {
            transform: rotateZ(180deg);
          }
        }
      }
    }
  }
}
</style>
